vue

<template>
    <el-drawer title="表单设置" :visible.sync="drawer" :size="300" :modal="false" direction='ltr'
        :before-close="handerClick">
        <main>
            <el-form v-model="attribute" label-width="80px" inline>
                <el-form-item v-for="(item, index) in options" :key="index" :label="item.label" :prop="item.value">
                    <el-input v-if="item.type === 'input'" v-model="attribute[item.value]"></el-input>
                    <el-select v-if="item.type === 'select'" v-model="attribute[item.value]">
                        <el-option v-for="(cItem, cIndex) in item.options" :key="cIndex" :value="cItem.value"
                            :label="cItem.label"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </main>
        <div class="footer-btn">
            <el-button type="primary" @click.stop="handerClick">确定</el-button>
        </div>
    </el-drawer>
</template>
  
<script>

export default {
    props: {
        name: String,
        flexType: {
            type: String,
            default: ""
        },
        drawer: {
            type: Boolean,
            default: false
        },
        options: {
            type: Array,
            default: () => ([])
        }

    },
    data() {
        return {
            attribute: {
                width: "",
                height: "",
                flex: "",
            },
        }
    },
    created() {
        this.options.forEach(item => {
            this.attribute[item.value] = ""
        })
        console.log(this.attribute)
    },
    watch: {
        attribute: {
            handler(data) {
                this.$emit("change", data)
            },
            deep: true
        },
    },
    methods: {
        click() {
            this.drawer = true
        },
        handerClick() {
            this.$emit("update:drawer", false)
            this.$emit("submit")
        },
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.footer-btn {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 10px;
    text-align: right;
}
</style>
  